<template>
  <div>
    <!-- 获取焦点添加=》类名=》focused -->
    <view :class="isSearch ? 'search focused' : 'search'">
      <view class="sinput">
        <!-- @confirm="goResult" 回车触发 -->
        <input
          type="text"
          placeholder="搜索"
          @focus="searching"
          v-model="keyWord"
          @input="getSuggestDataList"
          @confirm="goResult"
        />
        <button @click="exitSearch">取消</button>
      </view>
      <!-- 搜索状态显示=》下边内容 -->
      <view class="scontent" v-if="isSearch">
        <!-- 搜索建议商品 -->
        <scroll-view scroll-y class="result" v-if="isSuggest">
          <navigator
            v-for="item in suggestDataList"
            :key="item.goods_id"
            :url="`/packone/goods/index?id=${item.goods_id}`"
          >
            {{item.goods_name}}
          </navigator>
        </scroll-view>
        <!-- 搜索历史部分 -->
        <template v-else>
          <div class="title">
          搜索历史
          <span class="clear" @click="clearHistory"></span>
          </div>
          <!-- 搜索历史 -->
          <div class="history">
            <navigator v-for="(item, index) in history" :key="index" :url="`/packone/list/index?query=${item}`">{{item}}</navigator>
          </div>
        </template>
      </view>
    </view>
  </div>
</template>

<script>
import { getSuggestDataRequest } from '@/api/search.js'
export default {
  name: 'Search',

  data() {
    return {
      // 判断是否正在处于搜索状态
      isSearch: false,
      // 存储搜索输入关键词
      keyWord: '',
      // 建议商品列表
      suggestDataList: [],
      // 是否显示建议搜索列表
      isSuggest: false,
      // 定时器
      suggestTimer: null,
      // 搜索历史
      history: []
    }
  },
  methods: {
    // 是否处于搜索状态：
    searching() {
      // 读取本地存储里存储的搜索历史
      this.history = uni.getStorageSync('searchHistory') ? uni.getStorageSync('searchHistory') : []
      // 搜索模式打开
      this.isSearch = true
      // 隐藏 tabBar
      uni.hideTabBar({ animation:true })
      // 获取该屏幕的高度，使得不能滑动屏幕
      const pageHeight = uni.getSystemInfoSync().windowHeight + "px";
      this.$emit('handleSearch', pageHeight)
    },

    // 退出搜索状态
    exitSearch() {
      this.isSearch = false
      // 清空搜索栏内容
      this.keyWord = ''
      // 清空建议搜索商品列表
      this.suggestDataList = []
      // 推荐搜索隐藏，即搜索记录显示
      this.isSuggest = false
      // 显示 tabBar
      uni.showTabBar({ animation:true })
      this.$emit('handleSearch', '')
    },

    // 获取建议搜索列表
    getSuggestDataList() {
      // 使用防抖定时器实现性能优化
      if (this.suggestTimer) {
        clearTimeout(this.suggestTimer)
      }
      this.suggestTimer = setTimeout(async() => {
        // 判断 keyWord 是否为空，如果为空，则不发送请求
        if(this.keyWord.trim() === '') {
          // 推荐搜索隐藏，即搜索记录显示
          this.isSuggest = false
          // 清空建议搜索商品列表
          this.suggestDataList = []
          return
        }
        // 发起请求
        const {data} = await getSuggestDataRequest(this.keyWord)
        this.suggestDataList = data
        // 推荐搜索显示，即搜索隐藏
        this.isSuggest = true
      },1000)
    },

    // 回车跳转到搜索结果页面，通过关键词得到结果列表
    async goResult() {
      // 查重：判断新搜索的关键词是否已经出现在了历史记录中，如果有，则将以前的删除，存入新的
      this.history = this.history.filter(item => {
        return item !== this.keyWord
      })
      // console.log(this.history)
      // 将搜索关键词存储进搜索历史列表
      this.history.unshift(this.keyWord)
      // 将搜索关键词存储进本地存储
      uni.setStorage({
        key: 'searchHistory',
        data: this.history
      })
      // 跳转到搜索 结果页面：
      uni.navigateTo({
        url: "/packone/list/index?query="+this.keyWord
      })
    },

    // 点击清空搜索历史和搜索历史的本地存储
    clearHistory() {
      // 清空搜索历史
      this.history = []
      // 清空搜索历史的本地存储
      uni.removeStorageSync('searchHistory')
    }
  }
};
</script>

<style lang="scss" scoped>

// 搜索
.search {
  display: flex;
  flex-direction: column;
  .sinput {
    box-sizing: border-box;
    padding: 20rpx 16rpx;
    background: #80e992;
    position: relative;
    //伪元素
    &::after {
      position: absolute;
      top: 28rpx;
      left: 302rpx;
      content: "";
      width: 44rpx;
      height: 44rpx;
      line-height: 1;
      background-image: url(https://static.botue.com/ugo/images/icon_search%402x.png);
      background-size: 32rpx;
      background-position: 6rpx center;
      background-repeat: no-repeat;
    }
    input {
      background: #fff;
      flex: 1;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 24rpx;
      color: #bbb;
      border-radius: 5rpx;
    }
    button {
      display: none;
      margin-left: 20rpx;
      width: 150rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 24rpx;
      border-radius: 5rpx;
      background: transparent;
      color: #666;
    }
  }
  &.focused {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    .sinput {
      display: flex;
      background: #eee;
      input {
        text-align: left;
        padding-left: 60rpx;
      }
      button {
        display: block;
      }
      &::after {
        left: 30rpx;
      }
    }
  }
  .scontent {
    background: #fff;
    position: relative;

    flex: 1;
    padding: 27rpx;
    .title {
      font-size: 27rpx;
      line-height: 1;
      color: #333;
    }
    .clear {
      display: block;
      width: 27rpx;
      height: 27rpx;
      float: right;
      background-image: url(http://static.botue.com/ugo/images/clear.png);
      background-size: cover;
    }

    .history {
      padding-top: 30rpx;
      navigator {
        display: inline-block;
        line-height: 1;
        padding: 15rpx 20rpx 12rpx;
        background-color: #ddd;
        font-size: 24rpx;
        margin-right: 20rpx;
        margin-bottom: 15rpx;
        color: #333;
      }
    }

    .result {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: #fff;
      navigator {
        line-height: 1;
        padding: 20rpx 30rpx;
        font-size: 24rpx;
        color: #666;
        border-bottom: 1px solid #eee;

        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
}
</style>